<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托（事件代理）</title>
</head>
<style>
    #outer{
        height:100px;
        width: 100px;
        background-color:pink;
    }

    #inner{
        height:50px;
        width:50px;
        background-color:gray;
    }
</style>
<body>
    <!-- 
        事件委托就是利用冒泡的原理，把事件加到父组件或者祖先元素上，触发执行效果
        优点：
            1. 减少内存消耗和dom操作，提高性能
            2. 动态绑定事件 事件绑定在父级元素 所以新增的元素也能够同样触发事件
        缺点：
            可能会出现误判，比如不该被触发的事件呗绑定上了事件


        addEventListener 默认是冒泡 true：捕获 false：冒泡
     -->
     <div id="outer">
         <div id="inner" onclick="event.stopPropagation()"></div>
     </div>

     <script>
         const box1 = document.getElementById('outer');
         const box2 = document.getElementById('inner');

         box1.addEventListener('click', function() {
            alert('I am outer');
         });

         box2.addEventListener('click', function() {
            alert('I am inner');
         });
     </script>
</body>
</html>